<template>
  <div class="goods_wrapper">
    <div class="goods">
      <div id="menu_wrapper" >
        <ul>
          <li v-for="(item, index) in goods" class="menu_item" :class="{currentMenu:index == currentIndex}"
              @click="selectMenu(index,$event)">
            <div class="menu_content">
            <span class="menu_text">
            <span v-show="item.type > 0" class="icon_type" :class="classArr[item.type]"></span>
            {{item.name}}
          </span>
            </div>

          </li>
        </ul>
      </div>
      <div id="foods_wrapper" >
        <!--食物种类列表-->
        <ul>
          <li v-for="item in goods" class="foods_list food_list_hook">
            <h1 class="foods_title">{{item.name}}</h1>
            <!--食物各种类中的食物列表-->
            <ul class="foods_list_content">
              <li v-for="(food, index) in item.foods"  class="foods_list_item" @click="selectFood(food, $event)">
                <!--食物图片-->
                <div class="food_icon">
                  <img :src="food.icon" alt="食物图片">
                </div>
                <!--食物说明-->
                <div class="food_text">
                  <h2 class="food_name">{{food.name}}</h2>
                  <p v-show="food.description" class="food_desc">{{food.description}}</p>
                  <p class="food_exac">
                    <span class="food_count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                  </p>
                  <div class="food_price">
                    <span class="food_now">¥{{food.price}}</span>
                    <span v-show="food.oldPrice" class="food_old">¥{{food.oldPrice}}</span>
                  </div>
                  <!-- 数量控制组件-->
                  <div class="cartcontrol_wrapper">
                    <v-cartcontrol :food="food"></v-cartcontrol>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <v-shopcart ref="shopcart" :selectFoods="selectFoods" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice">
      </v-shopcart>
    </div>
    <v-food :selectedFood="selectedFood" ref="food"></v-food>
  </div>
</template>

<script>
  /*   有AJAX*/
  import BScroll from 'better-scroll'
  import shopcart from 'components/shopcart/shopcart'
  import cartcontrol from 'components/cartcontrol/cartcontrol'
  import food from 'components/food/food'
  import {urlParse} from 'common/js/urlparse'
  var ERR_OK = 0

  export default {
    data() {
      return {
        goods: [

        ],
        classArr: [],
        listHeight: [],
        scrollY: 0,
        selectedFood: {}
      }
    },
    props: {
      seller: Object
    },
    components: {
      'v-shopcart': shopcart,
      'v-cartcontrol': cartcontrol,
      'v-food': food
    },
    computed: {
      currentIndex() {
        for(let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if(!height2 || (this.scrollY >= height1-1 && this.scrollY <= height2-1)) {
            return i;
          }
        }
        return 0;
      },/*当前选择项*/
      selectFoods() {   /*选择了的食物列表*/
        let foods = [];
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if(food.count) {
              foods.push(food)
            }
          })
        })
        return foods;
      }
    },
    methods: {
      getGoodsData() {
        this.$http.get('/api/goods/' + this.$route.params.id).then(res => {
          if (res.data.errno === ERR_OK) {
            this.goods = res.data.data;
            this.$nextTick(() => {  /*在DOM更新后再 挂载*/
              this._initScroll();
              this._getHeight();
            })
          }
        })
      },
      /*初始化滚动 并且得到滚动的 Y 值*/
      _initScroll() {
        this.menuScroll = new BScroll(document.getElementById('menu_wrapper'), {
          click: true
        })
        this.foodScroll = new BScroll(document.getElementById('foods_wrapper'), {
          probeType: 3,
          click: true
        })
        this.foodScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));
        })
      },
      /* 得到每个食物列表的高度*/
      _getHeight() {
        let foodsWrapper = document.getElementById('foods_wrapper');
        let foodList = foodsWrapper.getElementsByClassName('food_list_hook');
        let  height = 0;
        this.listHeight.push(height);
        for(let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      },
      /*  选择菜单导航 */
      selectMenu(index, event) {
        if(!event._constructed) {
          return;
        }
        let foodsWrapper = document.getElementById('foods_wrapper');
        let foodList = foodsWrapper.getElementsByClassName('food_list_hook');
        let el = foodList[index];
        this.foodScroll.scrollToElement(el, 300);
      },
      /*点击食物*/
      selectFood(food, event) {
        if(!event._constructed) {
          return;
        }
        this.selectedFood = food
        this.$refs.food.show()
      },
      _drop(target) {  /*通过 ref访问 子组件 并且可以访问子组件的方法 */
        this.$refs.shopcart.drop(target)
      }
    },
    created() {
      /*eventHub.$on('cartadd',this._drop)*/
    },
    mounted() {
      this.getGoodsData()
      this.classArr = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../common/styles/mixin";
    .goods {
      display: flex;
      position: absolute;
      width: 100%;
      top: 174px;
      bottom: 46px;
      overflow: hidden;
      #menu_wrapper {
        flex: 0 0 80px;
        width: 80px;  /* 上面 flex写了80px 下面还需要 固定width*/
        background-color: #F3F5F7;
        .menu_item {
          padding: 0 12px;
          .menu_content {
            display: table;
            height: 54px;
            line-height: 14px;
            border-bottom: 1px solid #E0E3E6;
          }
          .menu_text {
            display: table-cell;
            width: 56px;
            vertical-align: middle;
            font-weight: 200;
            font-size: 12px;
            .icon_type {
              display: inline-block;
              width: 12px;
              height: 12px;
              background-size: contain;
              background-repeat: no-repeat;
              vertical-align: top;
              margin-top: 1px;
              &.decrease {
                @include bg-image('./iconImgs/decrease_3');
              }
              &.discount {
                @include bg-image('./iconImgs/discount_3');
              }
              &.guarantee {
                @include bg-image('./iconImgs/guarantee_3');
              }
              &.invoice {
                @include bg-image('./iconImgs/invoice_3');
              }
              &.special {
                @include bg-image('./iconImgs/special_3');
              }
            }
          }
        }
        .currentMenu {
          position: relative;
          z-index: 10;
          margin-top: -1px;
          background: #fff;
          font-weight: 700;
          .menu_content {
            border-bottom: none;
          }
        }
      }
      #foods_wrapper {
        flex: 1;
        .foods_title {
          padding-left: 14px;
          height: 26px;
          line-height: 26px;
          border-left: 2px solid #d9dde1;
          font-size: 12px;
          color: #B1B6BB;
          background-color: #F3F5F7;
        }
        .foods_list_content {
          padding: 0 18px;
          .foods_list_item {
            display: flex;
            position: relative;
            padding: 18px 0;
            border-bottom: 1px solid #ECEEF0;
            &:last-child {
              border-bottom: none;
            }
            .food_icon {
              flex: 0 0 57px;
              width: 57px;
              height: 57px;
              margin-right: 8px;
            }
            .food_text {
              .food_name {
                margin-bottom: 8px;
                font-size: 14px;
                line-height: 14px;
                color: #000;
              }
              .food_desc,.food_exac {
                margin-top: 8px;
                font-size: 10px;
                color: #ADB1B6;
              }
              .food_desc {
                line-height: 12px;
              }
              .food_exac {
                line-height: 10px;
                .food_count {
                  margin-right: 12px;
                }
              }
              .food_price {
                font-weight: 700;
                line-height: 24px;
                .food_now {
                  margin-right: 8px;
                  font-size: 14px;
                  color: #F01111;
                }
                .food_old {
                  text-decoration: line-through;
                  font-size: 10px;
                  font-weight: normal;
                  color: #8B9298;
                }
              }
              .cartcontrol_wrapper {
                position: absolute;
                right: 0;
                bottom: 12px;
              }
            }
          }
        }
      }
    }
</style>